<template>
	<view class="mine-container" :style="{height: `${windowHeight}px`}">
		<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
			<uni-col :span="4">
				<view>
					<view @click="back" style="display: flex;">
						<view><uni-icons type="left" size="24"></uni-icons></view>
					</view>
				</view>
			</uni-col>
			<uni-col :span="12">
				<view><text class=" text-xl" style="color:black">收货地址</text></view>
			</uni-col>
			<uni-col :span="4">
				<view v-if="isManage==false">
					<view @click="ManageAddress" style="display: flex;">
						<text style="text-align: center;  color: coral;">管理</text>
					</view>
				</view>
				<view v-if="isManage==true">
					<view @click="QuitManage" style="display: flex;">
						<text style="text-align: center;  color: coral;">退出管理</text>
					</view>
				</view>
			</uni-col>
			<uni-col :span="4">
				<view v-if="isManage==false">
					<view @click="goToAddressForm()" style="display: flex;">
						<text style="text-align: center; color: coral;">新增地址</text>
					</view>
				</view>
			</uni-col>
		</uni-row>
		<!-- 地址列表 -->
		<view class="address-list">
			<uni-card v-for="(address, index) in addressList" :key="address.addressId" class="address-card">
				<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
					<uni-col :span="16">
						<view class="address-info">
							<text class="address-name">{{ userName }}</text>
							<text class="address-phone">{{ userPhone }}</text>
							<text class="address-detail">{{ address.addressLine }}</text>
						</view>
					</uni-col>
					<!-- 编辑按钮 -->
					<uni-col :span="8">
						<view class="edit-button" @click="goToAddressForm(address.addressId)">
							<uni-icons type="compose" size="30"></uni-icons>
						</view>
						<view class="radio-button" v-if="isManage==true">
							<radio :value="String(address.addressId)"
								:checked="defaultAddressId === String(address.addressId)" style="transform:scale(0.7);"
								borderColor="#ff007f" @click="setDefaultAddress(address.addressId)" />
							<text style="font-size: 12px;">默认地址</text>
						</view>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import {
		getAddressList
	} from "@/api/system/user.js"
	export default {
		data() {
			return {
				gutter: 0,
				nvueWidth: 730,
				isManage: false,
				userId: '',
				userName: '',
				userPhone: '',
				defaultAddressId: '',
				addressList: [],
				addresses:{
					userId: '',
				}
			}
		},
		computed: {
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		created() {
			this.$store.dispatch('GetInfo')
				.then(res => {
					if (res.appUser.userId) {
						this.userId = res.appUser.userId;
						this.addresses.userId = res.appUser.userId;
						this.userName = res.appUser.userName;
						this.userPhone = res.appUser.userPhone;
					}
					// 假设 getAddress 方法需要在获取用户信息后调用
					this.getAddress();
				})
				.catch(error => {
					console.error('Failed to get user info:', error);
					// 处理错误情况，比如显示错误消息
				});
		},

		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			ManageAddress() {
				this.isManage = true;
			},
			QuitManage() {
				this.isManage = false;
			},
			setDefaultAddress(addressId) {
				this.defaultAddressId = String(addressId); // 更新默认地址的ID
				// 这里可以添加额外的逻辑，比如保存默认地址到后端数据库
				
			},
			getAddress() {
				getAddressList(this.addresses).then(res => {
					console.log(res);
					this.addressList = res;
					// 使用 filter 方法找到所有 isdefault 等于 1 的地址
					const defaultAddresses = this.addressList.filter(address => address.isDefault === 1);

					if (defaultAddresses.length > 0) {
						// 如果找到了默认地址，您可以遍历 defaultAddresses 数组
						defaultAddresses.forEach(defaultAddress => {
							console.log('默认地址 ID:', defaultAddress.addressId);
							this.defaultAddressId = String(defaultAddress.addressId);
						});
					} else {
						console.log('没有找到默认地址');
					}
				})
			},
			// 跳转到编辑或添加收货地址页面
			goToAddressForm(addressId) {
			  // 如果传递了 addressId，则表示是编辑操作
			  if (addressId) {
			    uni.navigateTo({
			      url: `/pages/mine/info/editAddress?addressId=${addressId}&action=edit`
			    });
			  } else {
			    // 如果没有传递 addressId，则表示是添加操作
			    uni.navigateTo({
			      url: `/pages/mine/info/editAddress?action=add`
			    });
			  }
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(241, 241, 241);
	}

	.radio-button {
		/* 根据需要设置样式 */
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
	}

	.uni-card {
		padding: 0px;
		margin: 0px;
	}

	.edit-button {
		/* 根据需要设置样式 */
		display: flex;
		/* 使用Flexbox布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		height: 100%;
		/* 使高度填满父容器 */
		padding: 10px;
	}

	.address-card {
		align-items: center;
	}

	.address-info {
		/* 根据需要设置样式 */
		flex: 1;
	}

	.address-name,
	.address-phone,
	.address-detail {
		/* 根据需要设置样式 */
		display: block;
	}

	.demo-uni-row {
		padding-bottom: 10px;
		padding-top: 10px;
		display: block;
		background-color: #ffffff;
	}

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	.mine-container {
		width: 100%;
		height: 100%;


		.header-section {
			padding: 15px 15px 45px 15px;
			background-color: #ffffff;
			color: black;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #ffffff;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
					color: black;
					margin-bottom: 10px;
				}

				.u_address {
					font-size: 14px;
					line-height: 24px;
					color: black;
					text-align: center;
				}
			}
		}
	}
</style>